<template>
  <div style="display: flex; justify-content: space-between">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>账号管理</el-breadcrumb-item>
      <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-button type="primary" @click="addAdmin">新增管理员</el-button>
  </div>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="adminname" label="管理员账号" />
    <el-table-column prop="role" label="角色">
      <template #default="scope">
        <el-tag type="success" v-if="scope.row.role === 1">管理员</el-tag>
        <el-tag type="danger" v-else>超级管理员</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button @click="editAdmin(scope.row)">编辑</el-button>

        <el-popconfirm
          title="确定要删除吗?"
          @confirm="confirm(scope.row.adminid)"
        >
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

  <el-drawer
    v-model="drawer"
    :title="isAdd ? '新增管理员' : '编辑管理员'"
    direction="rtl"
  >
    <el-form ref="addFormRef" :model="addForm" label-width="100px" status-icon>
      <el-form-item label="账号">
        <el-input v-model="addForm.adminname" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          v-model="addForm.password"
          type="password"
          show-password
          :disabled="!isAdd"
        />
      </el-form-item>
      <el-form-item label="权限">
        <el-select v-model="addForm.role" placeholder="请选择权限">
          <el-option label="管理员" value="1"></el-option>
          <el-option label="超级管理员" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="权限2">
        <el-tree
          :data="menuList"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          @check-change="checkChange"
          :default-expand-all="true"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div style="flex: auto">
        <el-button @click="drawer = false">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { getAdminApi, removeAdminApi, addAdminApi } from "@/api/user";
import { ElMessage } from "element-plus";

import menuList from "@/assets/js/menuList";

const defaultProps = {
  children: "children",
  label: "title",
};

interface AddForm {
  adminname: string;
  password: string;
  role: string;
}

const addForm = reactive<AddForm>({
  adminname: "",
  password: "",
  role: "",
});

const tableData = ref([]);
// 控制抽屉是否显示
const drawer = ref(false);
const isAdd = ref(true);
// 我已经选中的tree结构的key
let treeArr: string[] = [];

onMounted(() => {
  getData();
});

// 获取列表
const getData = async () => {
  const res = await getAdminApi();
  console.log(res);
  if (res) {
    tableData.value = res.data;
  }
};

// 新增打开抽屉
const addAdmin = () => {
  isAdd.value = true;
  addForm.adminname = "";
  addForm.password = "";
  addForm.role = "";
  drawer.value = true;
};

// 编辑打开抽屉
const editAdmin = (row: any) => {
  isAdd.value = false;
  addForm.adminname = row.adminname;
  addForm.password = row.password;
  addForm.role = row.role + "";
  drawer.value = true;
};

// 删除
const confirm = async (id: string) => {
  const res = await removeAdminApi({ adminid: id });
  if (res) {
    ElMessage({
      message: "管理员删除成功",
      type: "success",
    });
    getData();
  }
};

// 添加管理员
const submit = async () => {
  if (isAdd.value) {
    const res = await addAdminApi({
      ...addForm,
      checkedKeys: treeArr,
    });
    if (res) {
      drawer.value = false;
      ElMessage({
        message: "管理员添加成功",
        type: "success",
      });
      getData();
    }
  } else {
    // 调用编辑接口
    // 编辑接口比起新增接口，需要多一个参数id
  }
};

// 树形控件改变时
const checkChange = (a: any, b: any) => {
  console.log(a);

  if (b) {
    treeArr.push(a.key);
  } else {
    treeArr = treeArr.filter((item) => item !== a.key);
  }
};
</script>
